<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="description" content="">
  <title>Resume</title>
  <link rel="apple-touch-icon" href="apple-touch-icon.png">
  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/fonts/fontawesome-webfont.svg">
  <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/snack.css">
  <link rel="stylesheet" href="css/snack-helper.css">
  <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
  <style>
    html,
    body {
      background-color: #f5f5f5;
    }

    .page {
      max-width: 800px;
      margin: 20px auto;
      padding: 10px 20px;
      background-color: #fff;
      font-size: 14px;
    }

    h1 {
      margin: 20px -20px 20px;
      padding-left: 15px;
      border-left: 5px solid #F8B62D;
      font-size: 18px;
    }
  </style>
</head>

<body class="">
  <!--[if lt IE 9]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->
  <a href="https://github.com/nzbin/resume-boilerplate">
    <img style="position: absolute; z-index: 5; top: 0; right: 0; border: 0;"
         src="http://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"
         alt="Fork me on GitHub">
  </a>

  <main class="page shadow-2">
    <section>
      <h1>联系方式</h1>
      <div class="boxes">
        <div class="box bg-gray-lightest p-y-0">
          <div class="row g-32">
            <div class="col-4 p-y-8 b-r-1">● 手机：13120180628</div>
            <div class="col-4 p-y-8 b-r-1">● Email：nzb329@163.com</div>
            <div class="col-4 p-y-8">● QQ/微信：123456789</div>
          </div>
        </div>
      </div>
    </section>

    <section>
      <h1>个人信息</h1>
      <div class="boxes">
        <div class="box bg-gray-lightest p-y-0">
          <div class="row g-32">
            <div class="col-4 p-y-8 b-r-1">● 叙帝利 | 男 | 1990</div>
            <div class="col-4 p-y-8 b-r-1">● 山东理工 | 工业设计 | 本科</div>
            <div class="col-4 p-y-8">● 应聘前端开发 | 3 年工作经验</div>
          </div>
        </div>
        <div class="box bg-gray-lightest">
          ● Github：
          <a href="https://github.com/nzbin" target="_blank"
             class="text-gray-dark">https://github.com/nzbin</a>
        </div>
        <div class="box bg-gray-lightest">
          ● 技术博客：
          <a href="http://www.cnblogs.com/nzbin" target="_blank"
             class="text-gray-dark">http://www.cnblogs.com/nzbin</a>
        </div>
        <div class="box bg-gray-lightest">
          ● 豆瓣读书：
          <a href="https://book.douban.com/people/nzbin/" target="_blank"
             class="text-gray-dark">https://book.douban.com/people/nzbin/</a>
        </div>
        <div class="box bg-gray-lightest">
          ● 社区活动：伯乐在线翻译组成员，定期翻译优秀文章
        </div>
      </div>
    </section>

    <section>
      <h1>技术优势</h1>
      <div class="boxes">
        <div class="box bg-gray-lightest">
          ● 编写更加合理的 HTML 以及规范化的 CSS
        </div>
        <div class="box bg-gray-lightest">
          ● UI 框架以及响应式设计的深入理解
        </div>
        <div class="box bg-gray-lightest">
          ● 插件设计及编写（以 JS / jQuery 业务插件为主）
        </div>
        <div class="box bg-gray-lightest">
          ● 兴趣广泛，略懂后端，可以写点 PHP 和 Node
        </div>
      </div>
    </section>

    <section>
      <h1>开源项目</h1>
      <div class="boxes">
        <div class="box bg-gray-lightest">
          ● ng-matero（基于 Angular Material 的中后台管理框架）：
          <a href="https://github.com/ng-matero/ng-matero" target="_blank"
             class="text-gray-dark">https://github.com/ng-matero/ng-matero</a>
        </div>
        <div class="box bg-gray-lightest">
          ● extensions（Angular Material 扩展组件库）：
          <a href="https://github.com/ng-matero/extensions" target="_blank"
             class="text-gray-dark">https://github.com/ng-matero/extensions</a>
        </div>
        <div class="box bg-gray-lightest">
          ● photoviewer（图片查看器插件纯 JS 版）：
          <a href="https://github.com/nzbin/photoviewer" target="_blank"
             class="text-gray-dark">https://github.com/nzbin/photoviewer</a>
        </div>
        <div class="box bg-gray-lightest">
          ● domq（完美替换 jQuery 的模块化 DOM 库）：
          <a href="https://github.com/nzbin/domq" target="_blank"
             class="text-gray-dark">https://github.com/nzbin/domq</a>
        </div>
        <div class="box bg-gray-lightest">
          ● magnify（图片查看器插件 jQuery 版）：
          <a href="https://github.com/nzbin/magnify" target="_blank"
             class="text-gray-dark">https://github.com/nzbin/magnify</a>
        </div>
        <div class="box bg-gray-lightest">
          ● three-dots（单元素加载动画）：
          <a href="https://github.com/nzbin/three-dots" target="_blank"
             class="text-gray-dark">https://github.com/nzbin/three-dots</a>
        </div>
        <div class="box bg-gray-lightest">
          ● snack（轻量级 CSS 框架）：
          <a href="https://github.com/nzbin/snack" target="_blank"
             class="text-gray-dark">https://github.com/nzbin/snack</a>
        </div>
        <div class="box bg-gray-lightest">
          ● snack-helper（通用的 helper class）：
          <a href="https://github.com/nzbin/snack-helper" target="_blank"
             class="text-gray-dark">https://github.com/nzbin/snack-helper</a>
        </div>
        <div class="box bg-gray-lightest">
          ● memory-stake（数字记忆小程序）
          <a href="https://github.com/nzbin/memory-stake" target="_blank"
             class="text-gray-dark">https://github.com/nzbin/memory-stake</a>
        </div>
        <div class="box bg-gray-lightest">
          ● CardShow（卡片式抽奖插件）：
          <a href="https://github.com/nzbin/CardShow" target="_blank"
             class="text-gray-dark">https://github.com/nzbin/CardShow</a>
        </div>
      </div>
    </section>

    <section>
      <h1>技术文章</h1>
      <div class="boxes">
        <div class="box bg-gray-lightest">
          ●
          <a href="https://www.cnblogs.com/nzbin/p/9038154.html" target="_blank"
             class="text-gray-dark">《浅谈 Checkbox Group 的双向数据绑定》</a>
        </div>
        <div class="box bg-gray-lightest">
          ●
          <a href="https://www.cnblogs.com/nzbin/p/11495417.html" target="_blank"
             class="text-gray-dark">《代码美化的艺术》</a>
        </div>
        <div class="box bg-gray-lightest">
          ●
          <a href="https://www.cnblogs.com/nzbin/p/11424801.html" target="_blank"
             class="text-gray-dark">《Angular Material 的设计之美》</a>
        </div>
        <div class="box bg-gray-lightest">
          ●
          <a href="https://www.cnblogs.com/nzbin/p/11150811.html" target="_blank"
             class="text-gray-dark">《Ng-Matero：基于 Angular Material 搭建的中后台管理框架》</a>
        </div>
        <div class="box bg-gray-lightest">
          ●
          <a href="https://www.cnblogs.com/nzbin/p/10230272.html" target="_blank"
             class="text-gray-dark">《你不需要 jQuery，但你需要一个 DOM 库》</a>
        </div>
        <div class="box bg-gray-lightest">
          ●
          <a href="https://www.cnblogs.com/nzbin/p/7073601.html" target="_blank"
             class="text-gray-dark">《如何编写轻量级 CSS 框架》</a>
        </div>
        <div class="box bg-gray-lightest">
          ●
          <a href="https://www.cnblogs.com/nzbin/p/7746047.html" target="_blank"
             class="text-gray-dark">《如何编写通用的 Helper Class》</a>
        </div>
        <div class="box bg-gray-lightest">
          ●
          <a href="https://www.cnblogs.com/nzbin/p/7735883.html" target="_blank"
             class="text-gray-dark">《如何使用 Bootstrap 搭建更合理的 HTML 结构》</a>
        </div>
        <div class="box bg-gray-lightest">
          ●
          <a href="https://www.cnblogs.com/nzbin/p/7811451.html" target="_blank"
             class="text-gray-dark">《使用 SVG 和 JS 创建一个由星形变心形的动画》</a>
        </div>
        <div class="box bg-gray-lightest">
          ●
          <a href="https://www.cnblogs.com/nzbin/p/7397604.html" target="_blank"
             class="text-gray-dark">《构建具有用户身份认证的 React + Flux 应用程序》</a>
        </div>
        <div class="box bg-gray-lightest">
          ●
          <a href="https://www.cnblogs.com/nzbin/p/7283460.html" target="_blank"
             class="text-gray-dark">《给单元素艺术添加动画》</a>
        </div>
        <div class="box bg-gray-lightest">
          ●
          <a href="https://www.cnblogs.com/nzbin/p/6613674.html" target="_blank"
             class="text-gray-dark">《CSS 预处理器中的循环》</a>
        </div>
      </div>
    </section>

    <section>
      <h1>
        工作经历
        <a href="https://github.com/geekcompany/ResumeSample/blob/master/web.md" target="_blank"
           class="f-w-100 text-gray-dark">ResumeSample</a>
      </h1>
      <div class="boxes">
        <div class="box bg-gray-lightest">
          ● ABC 公司 （ 2015 年 5 月 ~ 至今 ）
        </div>
        <div class="box bg-gray-lightest">
          <p class="m-t-0">DEF 项目</p>
          <p>
            我在此项目负责了哪些工作，分别在哪些地方做得出色/和别人不一样/成长快，这个项目中，我最困难的问题是什么，我采取了什么措施，最后结果如何。这个项目中，我最自豪的技术细节是什么，为什么，实施前和实施后的数据对比如何，同事和领导对此的反应如何。
          </p>
        </div>
        <div class="box bg-gray-lightest">
          <p class="m-t-0">GHI 项目</p>
          <p>
            我在此项目负责了哪些工作，分别在哪些地方做得出色/和别人不一样/成长快，这个项目中，我最困难的问题是什么，我采取了什么措施，最后结果如何。这个项目中，我最自豪的技术细节是什么，为什么，实施前和实施后的数据对比如何，同事和领导对此的反应如何。
          </p>
        </div>
        <div class="box bg-gray-lightest">
          <p class="m-t-0">其他项目</p>
          <p>（每个公司写2~3个核心项目就好了，如果你有非常大量的项目，那么按分类进行合并，每一类选一个典型写出来。其他的一笔带过即可。）</p>
        </div>
      </div>

      <div class="boxes">
        <div class="box bg-gray-lightest">
          ● JKL 公司 （ 2013 年 9 月 ~ 2015 年 5 月 ）
        </div>
        <div class="box bg-gray-lightest">
          <p class="m-t-0">MNO 项目</p>
          <p>
            我在此项目负责了哪些工作，分别在哪些地方做得出色/和别人不一样/成长快，这个项目中，我最困难的问题是什么，我采取了什么措施，最后结果如何。这个项目中，我最自豪的技术细节是什么，为什么，实施前和实施后的数据对比如何，同事和领导对此的反应如何。
          </p>
        </div>
        <div class="box bg-gray-lightest">
          <p class="m-t-0">PQR 项目</p>
          <p>
            我在此项目负责了哪些工作，分别在哪些地方做得出色/和别人不一样/成长快，这个项目中，我最困难的问题是什么，我采取了什么措施，最后结果如何。这个项目中，我最自豪的技术细节是什么，为什么，实施前和实施后的数据对比如何，同事和领导对此的反应如何。
          </p>
        </div>
        <div class="box bg-gray-lightest">
          <p class="m-t-0">其他项目</p>
          <p>（每个公司写2~3个核心项目就好了，如果你有非常大量的项目，那么按分类进行合并，每一类选一个典型写出来。其他的一笔带过即可。）</p>
        </div>
      </div>
    </section>
  </main>

  <footer class="footer text-center">
    <p>
      Created with ❤️ by <a href="https://github.com/nzbin" target="_blank">nzbin</a>.
      Made with <a href="https://github.com/nzbin/snack" target="_blank">snack</a>.
    </p>
  </footer>

</body>

</html>